<template>
  <div class="content" v-loading="loading">
    <!--头部-->
    <div class="header-setting">
      <a-breadcrumb class="breadcrumb">
        <a-breadcrumb-item>
          <a href="../main">首页</a>
        </a-breadcrumb-item>
        <a-breadcrumb-item>系统设置</a-breadcrumb-item>
        <a-breadcrumb-item>月卡管理</a-breadcrumb-item>
      </a-breadcrumb>
      <!--查询条件-->
      <div class="box-condition-body">
        <div class="box-condition-item">
          <div style="margin: 0 50px">月卡名称</div>
          <template>
            <a-input
              style="margin: 0 100px 0 0px"
              placeholder="月卡名称"
              v-model="inputCardName"
              @change="selectChange"
            />
          </template>

          <div style="margin: 0 50px">月卡类型</div>
          <template>
            <a-select
              style="margin: 0 100px 0 0px; width: 200px"
              v-model="inputType"
              :options="selectCardRangeOption"
              placeholder="月卡类型"
              @change="selectChange"
            />
          </template>

          <div style="margin: 0 50px">月卡状态</div>
          <template>
            <a-select
                    style="width: 200px"
                    v-model="inputIsValid"
                    :options="isValidOption"
                    placeholder="月卡状态"
                    @change="selectChange"
            />
          </template>

          <div style="margin: 0 50px">停车点</div>
          <template>
            <a-select
                    style="margin: 0 0px 0 0px; width: 150px"
                    showSearch
                    placeholder="选择停车点"
                    optionFilterProp="children"
                    @change="selectChange"
                    v-model="inputParkId"
            >
              <a-select-option v-for="p in parks" :key="p.parkId" :value="p.parkId">
                {{ p.parkName }}
              </a-select-option>
            </a-select>
          </template>

        </div>
      </div>
    </div>

    <!-- 表内容 -->
    <div class="box-form">
      <!--工具栏-->
      <div class="box-tool">
        <div></div>
        <div style="display: flex">
          <a-button @click="addTap" icon="plus">添加</a-button>
          <a-button @click="editTap" icon="edit">编辑</a-button>

          <!-- 删除 -->
          <template v-if="selectedRowKeys.length != 0">
            <a-popconfirm
              title="确认删除？"
              okText="确认"
              cancelText="取消"
              @confirm="deleteClick"
              placement="topLeft"
            >
              <a-button icon="delete">删除</a-button>
            </a-popconfirm>
          </template>
          <template v-else>
            <a-button icon="delete" @click="deleteClick">删除</a-button>
          </template>
        </div>
      </div>

      <!-- 弹窗 -->
      <a-modal
        :title="title"
        v-model="dispatchPopupData.visible"
        :confirmLoading="dispatchPopupData.loading"
        @cancel="
          () => {
            this.hideDispatchPopup();
          }
        "
        @ok="addMonthCard"
      >
        <a-row style="margin-top: 0.5em">
          <a-col :span="6">月卡名称</a-col>
          <a-col :span="16">
            <a-input
              style="width: 70%"
              placeholder="月卡名称"
              v-model="cardName"
            />
          </a-col>
        </a-row>

        <a-row style="margin-top: 0.5em">
          <a-col :span="6">月卡类型</a-col>
          <a-col :span="16">
            <a-select
              style="width: 70%"
              v-model="addCardType"
              :options="addCardTypeOption"
              placeholder="月卡类型"
            />
          </a-col>
        </a-row>

        <a-row style="margin-top: 0.5em">
          <a-col :span="6">选择停车粒度</a-col>
          <a-col :span="6">
            <a-select
              style="width: 70%"
              v-model="add_select_range"
              :options="addCardRangeOption"
              placeholder="选择停车粒度"
            />
            <!--                        <select style="width: 200px" name="card_type" id="card_type"   class="classify mt10" v-model="add_select_range">-->
            <!--&lt;!&ndash;                            <option value="-1">选择停车粒度</option>&ndash;&gt;-->
            <!--                            <option :value="k.id" v-for="k in addCardRangeOption">{{k.value}}</option>-->
            <!--                        </select>-->
          </a-col>
        </a-row>

        <a-row style="margin-top: 0.5em">
          <a-col :span="6">月卡时长</a-col>
          <a-col :span="16">
            <a-input
              style="width: 70%"
              placeholder="月卡时长(单位：天)"
              v-model="cardDays"
            />
          </a-col>
        </a-row>

        <a-row style="margin-top: 0.5em">
          <a-col :span="6">月卡金额</a-col>
          <a-col :span="16">
            <a-input
              style="width: 70%"
              placeholder="月卡金额(单位：元)"
              v-model="cardCharge"
            />
          </a-col>
        </a-row>

        <a-row style="margin-top: 0.5em">
          <a-col :span="6">月卡有效时间</a-col>
          <!-- @ok="onOkPop" -->
          <a-col :span="16">
            <a-range-picker
              id="range-picker"
              :showTime="{
                format: 'HH:mm:ss',
              }"
              format="YYYY-MM-DD HH:mm:ss"
              :placeholder="['开始时间', '结束时间']"
              @ok="onOkPop"
              @change="onChangePop"
              :value="rangePickerValuePop()"
            />
          </a-col>
        </a-row>

        <a-row style="margin-top: 0.5em">
          <a-col :span="6">月卡状态</a-col>
          <a-col :span="16">
            <a-select
              style="width: 30%"
              v-model="isValid"
              :options="isValidOption"
              placeholder="月卡状态"
            />
          </a-col>
        </a-row>

        <a-row style="margin-top: 0.5em">
          <a-col :span="6">月卡描述</a-col>
          <a-col :span="16">
            <a-input
              style="width: 70%"
              placeholder="月卡描述"
              v-model="cardDescription"
            />
          </a-col>
        </a-row>
      </a-modal>

      <!--数据表格-->
      <div class="box-table">
        <a-table
          rowKey="no"
          :rowSelection="{
            selectedRowKeys: selectedRowKeys,
            onChange: onSelectChange,
            columnWidth: '3.5%',
          }"
          :columns="columns"
          :dataSource="entryExitRecordList"
          :pagination="pagination"
          @change="tableTabSort"
          bordered
          size="small"
          :scroll="scroll"
        >
          <template slot="cardType" slot-scope="text">
            <div v-if="text == 1">自然月卡</div>
            <div v-else>其它月卡</div>
          </template>
          <template slot="cardRange" slot-scope="text">
            <div v-if="text == 0">路外</div>
            <div v-else-if="text == 1">路内</div>
          </template>

          <template slot="cardCharge" slot-scope="text">
            <div>{{ text == undefined || text == "" ? text : text / 100 }}</div>
          </template>

          <template slot="isValid" slot-scope="text">
            <div v-if="text == 0">禁用</div>
            <div v-else-if="text == 1">启用</div>
          </template>

          <template slot="operation" slot-scope="text">
            <div class="operation">
              <a-button type="primary" @click="addMonthlyCard(text)">
                新增月卡配置
              </a-button>
              <a-button @click="detailsMonthCard(text)"> 详情 </a-button>
              <a-button @click="enableMonthCard(text)">
                <div v-if="text.isValid == 0">启用</div>
                <div v-else-if="text.isValid  == 1">禁用</div>
              </a-button>
            </div>
          </template>
        </a-table>
      </div>
      <!-- 新增月卡配置 -->
      <model-add
        :title="operationTitle"
        :visible="operationVisible"
        @handleOk="handleOk"
        @handleCancel="handleCancel"
      >
        <template>
          <slot>
            <a-tree
              v-model="selectParkIds"
              checkable
              :expanded-keys="expandedKeys"
              :auto-expand-parent="autoExpandParent"
              :selected-keys="selectedKeys"
              :tree-data="parkPointList"
              @expand="onExpand"
              @select="onSelect"
              @check="onCheck"
            />
          </slot>
        </template>
      </model-add>

      <model-add
        :title="detailsTitle"
        :visible="detailsVisible"
        @handleOk="detailsHandleOk"
        @handleCancel="detailsHandleCancel"
        size="small"
      >
        <template>
          <slot>
            <div class="detailBody">
              <div class="list-node-table">
                <a-table
                  :columns="detailsColumns"
                  :data-source="detailsData"
                  size="middle"
                  :pagination="paginationOne"
                  :customRow="customRow"
                  :rowClassName="setRowClassName"
                  :rowKey="(record) => record.parkId"
                >
                </a-table>
              </div>
              <div class="list-node-table">
                <a-button
                  type="danger"
                  size="small"
                  class="danger-del"
                  @click="deleteConfiguration(monthCardLinkId, selectedRowKeysRwo)"
                >
                  删除
                </a-button>

                <a-table
                  :columns="parkTruckColumns"
                  :data-source="parkTruckData"
                  :row-selection="rowSelectionCheckbox"
                  size="middle"
                  :pagination="paginationTwo"
                >
                </a-table>
              </div>
            </div>
          </slot>
        </template>
      </model-add>
    </div>
  </div>
</template>

<script>
import moment from "moment";
import Constant from "../../utils/Constant";
import MonthCardApi from "../../api/system/MonthCardManage";
import ModelAdd from "../../components/Modal/index.vue";
import ChargeSettingApi from "../../api/system/ChargeSettingApi";

const columns = [
  {
    title: "月卡名称",
    dataIndex: "cardName",
    width: "11%",
  },
  {
    title: "月卡类型",
    dataIndex: "cardType",
    scopedSlots: { customRender: "cardType" },
    width: "8%",
  },
  {
    title: "细粒度",
    dataIndex: "cardRange",
    scopedSlots: { customRender: "cardRange" },
    width: "5%",
  },
  {
    title: "月卡时长(天)",
    dataIndex: "cardDays",
    width: "8%",
  },
  {
    title: "月卡金额(元)",
    dataIndex: "cardCharge",
    scopedSlots: { customRender: "cardCharge" },
    width: "8%",
  },
  {
    title: "月卡开始时间",
    dataIndex: "startTime",
    width: "10%",
  },
  {
    title: "月卡结束时间",
    dataIndex: "endTime",
    width: "10%",
  },
  {
    title: "月卡描述",
    dataIndex: "description",
    width: "15%",
  },
  {
    title: "状态",
    dataIndex: "isValid",
    scopedSlots: { customRender: "isValid" },
    width: "5%",
  },
  {
    title: "操作",
    scopedSlots: { customRender: "operation" },
  },
];

/*设备查询条件*/
const conditionOfCard = {
  cardName: "",
  cardType: "",
  limit: "10",
  curr: "1",
};

export default {
  name: "MonthCardManage",

  data() {
    return {
      /*查询条件*/
      conditionOfCard,
      selectdevicevalidStatus: 2,
      inputCardName: "",
      inputType: "",
      inputIsValid: "",
      inputParkId: [],
      /*当前选中的行数据*/
      entryExitRecordList: [],
      columns,
      selectId: -1,
      parks: [],
      deviceUploadUrl: Constant.TEMPLATEUPLOAD_URL,
      uploadHeaders: {
        authorization: JSON.parse(localStorage.getItem("userinfo")).data,
      },
      tableState: {
        rowId: -1,
      },
      /*分页插件*/
      pagination: {
        showTotal: (total) => `共${total}条`,
        total: 0,
        defaultCurrent: 1,
        showQuickJumper: true,
        current: 1,
        defaultPageSize: 10,
      },
      paginationOne: {
        showTotal: (total) => `共${total}条`,
        total: 0,
        defaultCurrent: 1,
        current: 1,
        defaultPageSize: 5,
        onChange: (current) => this.changePage(current), //点击当前页码
      },
      paginationTwo: {
        showTotal: (total) => `共${total}条`,
        total: 0,
        defaultCurrent: 1,
        current: 1,
        defaultPageSize: 5,
        onChange: (current) => this.changePageTwo(current), //点击当前页码
      },

      /* 增加弹窗 */
      dispatchPopupData: {
        visible: false,
        loading: false,
      },
      title: "",
      cardName: "",
      addCardType: "",
      // addCardRangeOption:[{"id":0,"value":"路外"},{"id":1,"value":"路内"}],
      addCardRangeOption: [
        { value: 0, label: "路外" },
        { value: 1, label: "路内" },
      ],
      addCardTypeOption: [
        { value: 0, label: "其它类卡" },
        { value: 1, label: "自然月卡" },
      ],
      cardDays: "",
      isValid: "",
      selectCardRangeOption: [
        { value: "", label: "月卡类型" },
        { value: 0, label: "路外" },
        { value: 1, label: "路内" },
      ],
      isValidOption: [
        { value: 0, label: "禁用" },
        { value: 1, label: "启用" },
      ],
      startTime: "",
      endTime: "",
      cardDescription: "",
      cardCharge: "",

      /*联动部分变量*/
      add_select_range: 1,

      /*时间日期*/
      momentArr: [],
      momentArrPop: [],

      /* 表单选择 */
      selectedRowKeys: [] /* 选择key */,
      /*表格固定头部*/
      scroll: {
        y: 550,
      },
      operationTitle: "新增月卡配置",
      operationVisible: false,

      /*联动部分变量*/
      autoExpandParent: true,
      selectParkIds: [],
      expandedKeys: [],
      selectedKeys: [],
      parkPointList: [],

      rowNode: "",
      temp_select_park:"",
      temp_select_card:"",

      detailsTitle: "月卡详情",
      detailsVisible: false,

      detailsColumns: [
        {
          title: "停车场名称",
          dataIndex: "parkName",
        },
      ],
      detailsData: [],
      parkTruckData: [],
      parkTruckColumns: [
        {
          title: "泊位名",
          dataIndex: "truckSpaceName",
        },
      ],
      monthCardLinkId: [],
      //停车点详情
      // parkingPoint: "",
      monthCardRwo: "",
      monthlyCardBerthRow: "",
      selectedRowKeysRwo: [],
      loading: false,
    };
  },
  components: {
    ModelAdd,
  },
  computed: {
    rowSelectionCheckbox() {
      return {
        selectedRowKeys: this.selectedRowKeysRwo,
        onChange: (selectedRowKeys, selectedRows) => {
          let idList = selectedRows.map((item) => {
            return item.id;
          });
          this.selectedRowKeysRwo = selectedRowKeys;
          this.monthCardLinkId = idList;
        },
      };
    },
  },
  mounted() {
    this.initData();
  },

  methods: {
    initData() {
      this.loadDeviceList();
      this.initPark();
    },

    /* ---------------- 外部表单操作 ---------------- */
    addTap() {
      let selectArray = this.getSelectArray();
      if (selectArray.length != 0) {
        this.$message.error("请取消选中数据！");
        return;
      }
      this.dispatchPopupData.visible = true;
      this.dispatchPopupData.loading = false;
      this.title = "添加月卡";
      this.addCardType = 1;
      this.isValid = 1;
      this.startTime = "";
      this.endTime = "";
      this.momentArrPop[0] = null;
      this.momentArrPop[1] = null;
      this.cardDays = "";
    },

    editTap() {
      let selectArray = this.getSelectArray();
      if (selectArray.length == 0) {
        this.$message.error("请至少选中一个");
        return;
      }
      if (selectArray.length != 1) {
        this.$message.error("只能选择一个编辑");
        return;
      }

      selectArray = selectArray[0];
      this.dispatchPopupData.visible = true;
      this.dispatchPopupData.loading = false;
      this.title = "编辑月卡";
      this.cardName = selectArray.cardName;
      this.addCardType = selectArray.cardType;
      this.isValid = selectArray.isValid;
      this.cardCharge = selectArray.cardCharge / 100;
      this.add_select_range = selectArray.cardRange;
      this.cardDescription = selectArray.description;
      this.momentArrPop[0] = selectArray.startTime;
      this.momentArrPop[1] = selectArray.endTime;
      this.startTime = selectArray.startTime;
      this.endTime = selectArray.endTime;
      this.cardDays = selectArray.cardDays;
    },

    deleteClick() {
      let selectArray = this.getSelectArray();
      if (selectArray.length == 0) {
        this.$message.error("请至少选中一个");
        return;
      }

      let value = JSON.stringify(
        selectArray.map((item) => {
          return { id: item.id };
        })
      );
      MonthCardApi.delMonthCard(value)
        .then((data) => {
          if (data.code === 2000) {
            this.$message.success("删除月卡操作成功");
            this.initData();
          }
        })
        .catch((err) => {
          this.$message.warn("删除月卡失败:" + err.data);
        });
    },

    /* --------------- 设备查询条件 --------------- */
    /* 有效状态 */
    isvalidStatus(status) {
      this.selectdevicevalidStatus = status;
      this.loadDeviceList();
    },

    tableTabSort(pagination, filters, sorter) {
      let sortType = undefined;
      let sortField = undefined;
      if (sorter) {
        let { order, columnKey } = sorter;
        if (order === "descend") {
          sortType = 0;
        } else if (order == "ascend") {
          sortType = 1;
        }

        if (columnKey == "sn") {
          sortField = 0;
        } else if (columnKey == "device_name") {
          sortField = 1;
        } else if (columnKey == "device_type") {
          sortField = 2;
        } else if (columnKey == "is_valid") {
          sortField = 3;
        }
      }

      this.conditionOfCard.sortType = sortType;
      this.conditionOfCard.sortField = sortField;
      this.loadDeviceList(pagination.current);
    },

    resetQueryCondition() {
      this.inputCardName = "";
      this.inputType = "";
      this.conditionOfCard.cardType = [];
      this.clearSelectArray();
    },

    selectChange() {
      this.loadDeviceList();
    },

    /* --------------- 查询设备列表 --------------- */
    initPark(){
      /* ---- 初始化停车点 ---- */
      MonthCardApi.getMonthCardParkInfo()
        .then((data) => {
          if (data.code === 2000) {
              this.parks = data.data;
              debugger;
          }
          else{
            this.$message.success("获取停车点失败！");
          };
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    loadDeviceList(pageNum) {
      this.loading = true;
      this.clearSelectArray();
      /* ---- condition ---- */
      let condition = this.conditionOfCard;
      condition.cardName = this.inputCardName;
      condition.cardType = this.inputType;
      condition.isValid = this.inputIsValid;
      condition.parkId = this.inputParkId;

      condition.curr = pageNum || 1;

      /* ---- 查询 ---- */
      MonthCardApi.getMonthCardInfoList(condition)
        .then((data) => {
          this.loading = false;
          let { list, total, pageNum, pageSize } = data.data;
          let array = list || [];
          array = array.map((item, index) => {
            return { ...item, no: total - (pageNum - 1) * pageSize - index };
          });
          this.entryExitRecordList = array;
          this.pagination.total = total;
          this.pagination.current = pageNum;
        })
        .catch((err) => {
          this.loading = false;
          this.$message.error(err);
        });
    },

    /* ---------------- 选中处理 ------------------- */
    getSelectArray() {
      let entryExitRecordList = this.entryExitRecordList || [];
      let selectedRowKeys = this.selectedRowKeys;
      return entryExitRecordList.filter((item) => {
        return selectedRowKeys.filter((no) => no == item.no).length > 0;
      });
    },

    clearSelectArray() {
      this.selectedRowKeys = [];
    },

    /* ----------------------------------------- */
    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys;
    },

    /* --------------- 内部弹窗 --------------- */
    seeLog_trigger(logUrl) {
      let url = encodeURI(logUrl).replace(/#/g, "%23");
      window.open(url);
    },

    log_flush(condition) {
      this.selectImei = condition.imei;
      this.selectLogHeartbeatTrigger(1, false);
    },

    downloadLogTrigger(logUrl) {
      let url = encodeURI(logUrl + "?attname=").replace(/#/g, "%23");
      window.open(url);
    },

    setRowClassName(record) {
      return record.parkId === this.tableState.rowId ? "clickRowStyl" : "";
    },

    /*-----------------设备日志/设备心跳--------------*/
    /*点击遮罩层*/
    maskTap() {
      if (!this.maskClose) return;
      this.hideAddPages();
    },

    /*隐藏遮罩层*/
    hideAddPages() {
      this.isShowAddPages = false;
    },

    /*防止子类点击事件被穿透*/
    addPagesTap() {},

    doThis() {},

    /*时间按钮控制*/
    button_time(e, type) {
      //type 1 日志 2 心跳
      this.selectId = e;
      let momentStart;
      let momentEnd;
      switch (e) {
        case 0:
          momentStart = moment().startOf("day");
          momentEnd = moment().endOf("day");
          break;
        case 1:
          momentStart = moment().add("day", -1).startOf("day");
          momentEnd = moment().add("day", -1).endOf("day");
          break;
        case 2:
          momentStart = moment().week(moment().week()).startOf("week");
          momentEnd = moment().week(moment().week()).endOf("week");
          break;

        case 3:
          momentStart = moment()
            .week(moment().week() - 1)
            .startOf("week");
          momentEnd = moment()
            .week(moment().week() - 1)
            .endOf("week");
          break;
        case 4:
          momentStart = moment().month(moment().month()).startOf("month");
          momentEnd = moment().month(moment().month()).endOf("month");
          break;
        default:
          break;
      }
      this.momentArr[0] = momentStart;
      this.momentArr[1] = momentEnd;
      this.selectLogHeartbeatTrigger(type, true);
    },

    /*日期选择*/
    heartbeatOnChange(date) {
      this.selectId = -1;
      this.momentArr = date;
      if (date == undefined || date.length == 0) {
        this.onOk(2);
      }
    },

    logOnChange(date) {
      this.selectId = -1;
      this.momentArr = date;
      if (date == undefined || date.length == 0) {
        this.onOk(1);
      }
    },

    onOk(type) {
      this.selectId = -1;
      this.selectLogHeartbeatTrigger(type, true);
    },

    rangePickerValue() {
      return this.momentArr;
    },

    hideDispatchPopup() {
      this.dispatchPopupData.visible = false;
      this.id = "";
      this.cardName = "";
      this.addCardType = 1;
      (this.cardCharge = ""), (this.isValid = 1);
      this.cardDescription = "";
      this.add_select_range = 1;
      this.cardDays = "";
    },
    addMonthCard() {
      let selectArray = this.getSelectArray();
      let condition = {
        cardName: this.cardName,
        cardType: this.addCardType,
        cardCharge: this.cardCharge,
        cardRange: this.add_select_range,
        startTime: this.startTime,
        endTime: this.endTime,
        isValid: this.isValid,
        description: this.cardDescription,
        cardDays: this.cardDays,
      };

      if (
        this.cardName == "" ||
        this.addCardType === "" ||
        this.cardCharge == "" ||
        this.add_select_range === "" ||
        this.startTime == "" ||
        this.endTime == "" ||
        this.isValid === "" ||
        this.cardDays == ""
      ) {
        this.$message.error("请输入相关信息");
        return;
      }
      if (selectArray.length === 0) {
        condition.cardCharge = condition.cardCharge * 100;
        MonthCardApi.addMonthCardInfo(condition)
          .then((data) => {
            if (data.code === 2000) {
              this.$message.success("增加月卡操作成功");
              this.initData();
              this.hideDispatchPopup();
            }
            this.dispatchPopupData.visible = false;
          })
          .catch((err) => {
            this.$message.warn("增加月卡失败:" + err.data);
            this.hideDispatchPopup();
          });
      } else {
        condition.id = selectArray[0].id;
        condition.cardCharge = condition.cardCharge * 100;
        MonthCardApi.updateMonthCardInfo(condition)
          .then((data) => {
            if (data.code === 2000) {
              this.$message.success("编辑月卡操作成功");
              this.initData();
              this.hideDispatchPopup();
            }
            this.dispatchPopupData.visible = false;
          })
          .catch((err) => {
            this.$message.warn("编辑月卡操作失败:" + err);
            this.hideDispatchPopup();
          });
      }
    },
    setTime(fmt) {
      const time = new Date(fmt);
      const Y = time.getFullYear();
      const M = (time.getMonth() + 1).toString().padStart(2, "0");
      const D = time.getDate().toString().padStart(2, "0");
      const h = time.getHours().toString().padStart(2, "0");
      const m = time.getMinutes().toString().padStart(2, "0");
      const s = time.getSeconds().toString().padStart(2, "0");
      return `${Y}-${M}-${D} ${h}:${m}:${s}`;
    },
    onOkPop(value) {
      this.momentArrPop = value;
      if (this.momentArrPop != undefined && this.momentArrPop.length != 0) {
        this.startTime = this.setTime(this.momentArrPop[0]);
        this.endTime = this.setTime(this.momentArrPop[1]);
      }
    },
    onChangePop(dates) {
      this.momentArrPop = dates;
    },
    rangePickerValuePop() {
      return this.momentArrPop;
    },
    addMonthlyCard(row) {
      this.initParkData(row.id);
      this.rowNode = row;
      this.operationVisible = true;
    },
    handleOk() {
      this.addMonthCardConfig(this.rowNode.id, this.selectParkIds);
      this.closeModleAdd();
      this.operationVisible = false;
    },
    handleCancel() {
      this.closeModleAdd();
      this.operationVisible = false;
    },
    closeModleAdd() {
      this.selectParkIds = [];
      this.expandedKeys = [];
      this.selectedKeys = [];
      this.parkPointList = [];
    },
    onExpand(keys) {
      console.log("onExpand", keys);
      this.expandedKeys = keys;
      this.autoExpandParent = false;
    },
    // 点击复选框触发
    onCheck(keys) {
      console.log("onCheck", keys);
      this.selectParkIds = keys;
    },
    // 点击树节点触发
    onSelect(keys, info) {
      console.log("onselect", keys);
      this.selectParkIds = keys;
    },

    initParkData(id) {
      MonthCardApi.getMonthCardRange({ id: id })
        .then((data) => {
          if (data.code === 2000) {
            let range = data.data;
            if (range === 0) {
              this.parkingPoint();
            } else {
              this.parkingPointTree();
            }
          }
        })
        .catch((err) => {
          this.$message.warn("获取月卡粒度失败:" + err);
          this.hideDispatchPopup();
        });
    },

    parkingPointTree() {
      ChargeSettingApi.pointTree()
        .then((data) => {
          this.parkPointList = data.data;
        })
        .catch((error) => this.$message.error("获取停车点泊位失败:" + error));
    },
    parkingPoint() {
      ChargeSettingApi.point()
        .then((data) => {
          this.parkPointList = data.data;
        })
        .catch((error) => this.$message.error("获取停车点失败:" + error));
    },

    addMonthCardConfig(id, imeiIdList) {
      MonthCardApi.addMonthCardConfigInfo({ id: id, imeiIdList: imeiIdList })
        .then((data) => {
          if (data.code === 2000) {
            this.$message.success("增加月卡配置操作成功");
            // this.initData();
            // this.hideDispatchPopup();
          }
          this.dispatchPopupData.visible = false;
        })
        .catch((err) => {
          this.$message.warn("增加月卡配置操作失败:" + err.data);
          //   this.hideDispatchPopup();
        });
    },
    detailsHandleOk() {
      this.detailsData = [];
      this.parkTruckData = [];
      this.detailsVisible = false;
    },
    detailsHandleCancel() {
      this.temp_select_park = "";
      this.temp_select_card = "";
      this.selectedRowKeysRwo = [];
      this.detailsData = [];
      this.parkTruckData = [];
      this.detailsVisible = false;
    },
    detailsMonthCard(row) {
      this.detailsTitle = row.cardName + "详情";
      this.monthCardRwo = row;
      this.monthCardParkList(
        row.id,
        this.paginationOne.defaultPageSize,
        this.paginationOne.current
      );
      this.detailsVisible = true;
    },
    enableMonthCard(row){
      this.monthCardRwo = row;
      MonthCardApi.enableMonthCard({ id: row.id, type: row.isValid})
              .then((data) => {
                if (data.code === 2000) {
                  this.$message.success("状态设置成功");
                }
                this.initData();
              })
              .catch((err) => {
                this.$message.warn("状态设置异常:" + err);
              });
    },

    // 获取月卡停车点
    monthCardParkList(id, limit, curr) {
      ChargeSettingApi.getMonthCardPark({
        id: id,
        limit: limit,
        curr: curr,
      })
        .then((data) => {
          this.detailsData = data.data.list;
          this.paginationOne.total = data.data.total;
          this.paginationOne.current = data.data.pageNum;
        })
        .catch((err) => {
          this.$message.warn("获取月卡停车点失败！:" + err);
        });
    },
    // 获取月卡泊位
    monthlyCardBerth(id, parkId, limit, curr) {
      ChargeSettingApi.getMonthCardParkTruck({
        id: id,
        limit: limit,
        curr: curr,
        parkId: parkId,
      })
        .then((data) => {
          this.parkTruckData = data.data.list;
          this.paginationTwo.total = data.data.total;
          this.paginationTwo.current = data.data.pageNum;
          this.selectedRowKeysRwo = [];
          this.monthCardLinkId = [];
        })
        .catch((err) => {
          this.$message.warn("获取月卡泊位失败！:" + err);
        });
    },

    async deleteConfiguration(id, selectedRowKeysRwo) {
      if(id.length == 0)
      {
        await ChargeSettingApi.deleteMonthCardLink({
          id: this.temp_select_card,
          parkId: this.temp_select_park,
        })
          .then((data) => {
            if (data.code == 2000) {
              this.$message.success("删除月卡停车点成功！");
              this.detailsHandleCancel();
            }
          })
          .catch((err) => {
            this.$message.warn("删除月停车点失败！:" + err.data);
          });
      }
      else
      {
          await ChargeSettingApi.deleteMonthCardLink({
            parkIdList: id,
          })
            .then((data) => {
              if (data.code == 2000) {
                this.$message.success("删除月卡泊位成功！");
                this.monthlyCardBerth(
                  this.temp_select_card,
                  this.temp_select_park,
                  this.paginationTwo.defaultPageSize,
                  this.paginationTwo.current
                );
              }
            })
            .catch((err) => {
              this.$message.warn("删除月卡泊位失败！:" + err.data);
            });
      }
    },

    changePage(curr) {
      this.monthCardParkList(
              this.monthCardRwo.id,
              this.paginationOne.defaultPageSize,
              curr
      );
    },

    changePageTwo(curr) {
      this.monthlyCardBerth(
        this.temp_select_card,
        this.temp_select_park,
        // this.monthlyCardBerthRow[0].id,
        // this.monthlyCardBerthRow[0].parkId,
        this.paginationTwo.defaultPageSize,
        curr
      );
    },

    customRow(record, index) {
      return {
        on: {
          // 事件
          click: () => {
            this.parkTruckData = [];
            this.monthlyCardBerth(
              record.id,
              record.parkId,
              this.paginationTwo.defaultPageSize,
              this.paginationTwo.current
            );
            this.selectedRowKeysRwo = [];
            this.tableState.rowId = record.parkId;
            this.temp_select_card = record.id;
            this.temp_select_park = record.parkId;
          }, // 点击行
        },
      };
    },
  },
};
</script>

<style scoped>
/*组件样式*/
/*文本框*/
.ant-input {
  width: 200px;
  margin: 0 8px 8px 0;
}

.clickRowStyl {
  background-color: #c1e0fd;
}

.content {
  width: 100%;
  height: 100%;
}

.header-setting {
  width: 100%;
  height: 120px;
  background: #fff;
}

.header-setting .breadcrumb {
  margin-left: 41px;
  padding-top: 15px;
}

/* 表单 */
.box-form {
  padding-left: 40px;
  padding-right: 40px;
  min-height: 705px;
  background: #fff;
  margin-top: 8px;
}

.box-form .box-tool {
  padding-top: 11px;
  margin: 8px 0;
  width: 100%;
  /* flex */
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.box-condition-item {
  display: flex;
  align-items: center;
  min-width: 1500px;
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 5px 0;
}

.button_online {
  margin-left: 62px;
  display: flex;
}

.button_online button {
  margin-right: 10px;
}

.box-tool button {
  margin-right: 10px;
}

/*-----------------设备日志/设备心跳--------------*/
.box-form-others {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
}

.box-form-others .form {
  width: 970.5px;
  height: 500px;
  padding-bottom: 20px;
  background: #fff;
  border-radius: 10px;
  /*max-height: ;*/

  position: fixed;
  left: 50%;
  top: 15%;
  transform: translate(-50%, 0);
  /* flex */
  display: flex;
  align-items: flex-start;
  flex-direction: column;
}

.box .box-item {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 5px 5px 20px 5px;
}

.button_time button {
  margin-left: 10px;
}

.operation > button {
  margin: 5px;
}
.detailBody {
  display: flex;
}
.list-node-table {
  width: 50%;
  margin: 10px;
}
.danger-del {
  position: absolute;
  top: 1%;
  right: 4%;
}
</style>
